<template>
    <div class="activity-phone-preview">
        <el-scrollbar :height="scrollHeight" @scroll="scroll">
            <slot></slot>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted } from 'vue';

interface SizeType {
    [propsName: string]: number;
}

const props = defineProps({
    /**
     * 是否海报，海报高度采用667
     */
    isPoster: {
        type: Boolean,
        default: false
    }
});

const config = reactive<SizeType>({
    width: 375
});

const state = reactive<SizeType>({
    width: 375,
    height: 667,
    radius: 54,
    border: 10,
    paddingTop: 36,
    paddingBottom: 28
});

const complex = computed(() => config.width / state.width);
const width = computed(() => `${Math.round(config.width)}px`);
const height = computed(() => `${Math.round(complex.value * state.height)}px`);
const radius = computed(() => `${Math.round(complex.value * state.radius)}px`);
const border = computed(() => `${Math.round(complex.value * state.border * 1.2)}px`);
const paddingTop = computed(() => `${Math.round(complex.value * state.paddingTop)}px`);
const paddingBottom = computed(() => `${Math.round(complex.value * state.paddingBottom)}px`);
const scrollHeight = computed(() =>
    props.isPoster
        ? `${parseInt(height.value)}px`
        : `${parseInt(height.value) - parseInt(paddingTop.value) - parseInt(paddingBottom.value)}px`
);

const emit = defineEmits(['scroll']);

const scroll = () => {
    emit('scroll');
};
</script>
<style scoped lang="scss">
.activity-phone-preview {
    width: v-bind(width);
    height: v-bind(scrollHeight);
    border: v-bind(border) solid #eff4f6;
    border-radius: v-bind(radius);
    background-image: url('@/assets/image/phonePreview/activity_phone_title.png'),
        url('@/assets/image/phonePreview/activity_phone_bar.png');
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    background-color: #fbfbfb;
    padding-top: v-bind(paddingTop);
    padding-bottom: v-bind(paddingBottom);
    position: relative;
}
</style>
